<template>
  <h1 class="text-base font-semibold leading-7 text-gray-900">
    {{ $t('pagePowerRestorePolicy.powerPoliciesLabel') }}
  </h1>
  <el-form>
    <div class="mb-2 flex items-center text-sm">
      <el-radio-group v-model="option" class="block ml-4">
        <el-row v-for="(item, index) in powerRestorePolicies" :key="index">
          <el-radio class="font-semibold" :value="item.state" size="large">
            {{ item.desc }}
          </el-radio>
        </el-row>
      </el-radio-group>
    </div>
    <el-button type="primary" @click="save()">
      {{ $t('global.action.saveSettings') }}
    </el-button>
  </el-form>
</template>

<script setup lang="ts">
import { usePowerPolicyStore } from '@/store/Settings/PowerPolicyStore';

const powerPolicyStore = usePowerPolicyStore();

const option = ref();

await powerPolicyStore.getPowerRestorePolicies();
await powerPolicyStore.getPowerRestoreCurrentPolicy();
option.value = powerPolicyStore.powerRestoreCurrentPolicy;

const powerRestorePolicies = computed(
  () => powerPolicyStore.powerRestorePolicies,
);

const save = () => {
  powerPolicyStore
    .setPowerRestorePolicy(option.value)
    .then((message: string) =>
      ElNotification({
        type: 'success',
        message,
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        type: 'error',
        message,
      }),
    );
};
</script>
